<template>
  <div v-if="visible" class="modal-overlay" @click="handleClose">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>🔐 密码生成器</h3>
        <button @click="handleClose" class="modal-close">×</button>
      </div>
      <div class="modal-body">
        <!-- 生成的密码 -->
        <div class="generated-password-container">
          <div class="generated-password" :class="{ 'password-hidden': !showPassword }">
            {{ generatedPassword || '点击生成密码' }}
          </div>
          <div class="password-actions">
            <button @click="togglePasswordVisibility" class="action-btn" :title="showPassword ? '隐藏' : '显示'">
              {{ showPassword ? '🙈' : '👁️' }}
            </button>
            <button @click="copyPassword" class="action-btn" :disabled="!generatedPassword" title="复制">
              📋
            </button>
            <button @click="generatePassword" class="action-btn primary" title="重新生成">
              🔄
            </button>
          </div>
        </div>

        <!-- 密码强度 -->
        <PasswordStrengthMeter
          v-if="generatedPassword"
          :password="generatedPassword"
          :show-score="true"
          :show-details="true"
        />

        <!-- 生成选项 -->
        <div class="generator-options">
          <div class="option-group">
            <label class="option-label">
              <span>密码长度: {{ options.length }}</span>
            </label>
            <input
              type="range"
              v-model.number="options.length"
              min="8"
              max="32"
              class="length-slider"
            />
            <div class="length-marks">
              <span>8</span>
              <span>16</span>
              <span>24</span>
              <span>32</span>
            </div>
          </div>

          <div class="option-group">
            <label class="checkbox-option">
              <input type="checkbox" v-model="options.includeUppercase" />
              <span>包含大写字母 (A-Z)</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" v-model="options.includeLowercase" />
              <span>包含小写字母 (a-z)</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" v-model="options.includeNumbers" />
              <span>包含数字 (0-9)</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" v-model="options.includeSpecialChars" />
              <span>包含特殊字符 (!@#$%...)</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" v-model="options.excludeAmbiguous" />
              <span>排除易混淆字符 (0oO1lI)</span>
            </label>
          </div>

          <div class="option-tips">
            💡 建议使用至少16位,包含所有字符类型的密码
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button @click="handleClose" class="btn-secondary">取消</button>
        <button @click="applyPassword" class="btn-primary" :disabled="!generatedPassword">
          使用此密码
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { generateStrongPassword, type PasswordGenerateOptions } from '@/utils/password-strength'
import PasswordStrengthMeter from './PasswordStrengthMeter.vue'

interface Props {
  visible: boolean
}

interface Emits {
  (e: 'close'): void
  (e: 'apply', password: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const generatedPassword = ref('')
const showPassword = ref(true)
const options = ref<PasswordGenerateOptions>({
  length: 16,
  includeUppercase: true,
  includeLowercase: true,
  includeNumbers: true,
  includeSpecialChars: true,
  excludeAmbiguous: true
})

// 监听弹窗显示,自动生成密码
watch(() => props.visible, (visible) => {
  if (visible && !generatedPassword.value) {
    generatePassword()
  }
})

// 监听选项变化,自动重新生成
watch(options, () => {
  if (generatedPassword.value) {
    generatePassword()
  }
}, { deep: true })

// 生成密码
const generatePassword = () => {
  try {
    generatedPassword.value = generateStrongPassword(options.value)
  } catch (error) {
    console.error('生成密码失败:', error)
  }
}

// 切换密码显示
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 复制密码
const copyPassword = async () => {
  if (!generatedPassword.value) return

  try {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(generatedPassword.value)
      // 可以添加Toast提示
      alert('密码已复制到剪贴板')
    } else {
      // 降级方案
      const textArea = document.createElement('textarea')
      textArea.value = generatedPassword.value
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand('copy')
      document.body.removeChild(textArea)
      alert('密码已复制到剪贴板')
    }
  } catch (error) {
    console.error('复制失败:', error)
    alert('复制失败')
  }
}

// 应用密码
const applyPassword = () => {
  if (generatedPassword.value) {
    emit('apply', generatedPassword.value)
    handleClose()
  }
}

// 关闭弹窗
const handleClose = () => {
  emit('close')
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.modal-close:hover {
  color: #666;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e9ecef;
}

/* 生成的密码 */
.generated-password-container {
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.generated-password {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  padding: 12px;
  background: white;
  border-radius: 6px;
  margin-bottom: 12px;
  word-break: break-all;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.generated-password.password-hidden {
  font-size: 24px;
  letter-spacing: 4px;
}

.password-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.action-btn {
  padding: 8px 16px;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}

.action-btn:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #1890ff;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-btn.primary {
  background: #1890ff;
  border-color: #1890ff;
  color: white;
}

.action-btn.primary:hover {
  background: #40a9ff;
  border-color: #40a9ff;
}

/* 生成选项 */
.generator-options {
  margin-top: 20px;
}

.option-group {
  margin-bottom: 20px;
}

.option-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.length-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e9ecef;
  outline: none;
  -webkit-appearance: none;
  margin-bottom: 8px;
}

.length-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1890ff;
  cursor: pointer;
}

.length-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1890ff;
  cursor: pointer;
  border: none;
}

.length-marks {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  padding: 0 4px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  color: #333;
}

.checkbox-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.checkbox-option:hover {
  color: #1890ff;
}

.option-tips {
  padding: 12px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 6px;
  font-size: 13px;
  color: #0050b3;
}

/* 按钮样式 */
.btn-primary {
  padding: 8px 20px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.btn-primary:hover:not(:disabled) {
  background: #40a9ff;
}

.btn-primary:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
}

.btn-secondary {
  padding: 8px 20px;
  background: white;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.btn-secondary:hover {
  border-color: #1890ff;
  color: #1890ff;
}
</style>
